<template>
  <div class="container vh-100 d-flex justify-content-center align-items-center">
    <div class="col-11 col-sm-8 col-md-6 col-lg-4 col-xl-4 col-xxl-4 p-4 border shadow-sm rounded">
      <form>
        <div class="mb-3">
          <label for="exampleInputEmail1" class="form-label">用户名</label>
          <input type="email" :class="['form-control', { 'is-invalid': loginInfo.usernameMsg }]" id="exampleInputEmail1"
            aria-describedby="emailHelp" v-model="loginInfo.username">
          <div class="invalid-feedback">
            {{ loginInfo.usernameMsg }}
          </div>
        </div>
        <div class="mb-3">
          <label for="exampleInputPassword1" class="form-label">密码</label>
          <input type="password" :class="['form-control', { 'is-invalid': loginInfo.passwordMsg }]"
            id="exampleInputPassword1" v-model="loginInfo.password">
          <div class="invalid-feedback">
            {{ loginInfo.passwordMsg }}
          </div>
        </div>
        <div class="mb-3 form-check">
          <input type="checkbox" class="form-check-input" id="exampleCheck1">
          <label class="form-check-label" for="exampleCheck1">记住我</label>
        </div>
        <div class="d=flex flex-column align-items-center px-1">
          <button type="submit" class="btn btn-primary w-100 text-white" @click.prevent="toLogin">登录</button>
          <router-link to="/reg">
            <button type="button" class="btn w-100 mt-3 border rounded">注册</button>
          </router-link>
        </div>
      </form>
    </div>
  </div>
</template>

<script lang="ts">
// import axios from 'axios';
import { computed } from 'vue';
import { defineComponent, reactive } from 'vue'
import { useRouter } from 'vue-router';
// import axios from '@/utils/axios'
import { signin } from '@/api/login';
import { useUserStore } from '@/store/user';

interface LoginResponse {
  access_token: string;
}

export default defineComponent({
  setup() {
    const router = useRouter();
    const store = useUserStore();

    const loginInfo = reactive({
      username: '',
      usernameMsg: computed(() => {
        // if (
        //   loginInfo.username !== '' && !/[A-Z0-9._%+-]+@[A-Z0-9-]+.+.[A-Z]{2,4}/gim.test(loginInfo.username)
        // ) {
        //   return '请输入正确的邮箱地址'
        // }
        return ''
      }),
      password: '',
      passwordMsg: computed(() => {
        if (loginInfo.password !== '' && loginInfo.password.length < 6) {
          return '密码长度不能小于6位'
        }
        return ''
      }),
    })

    const toLogin = async () => {
      console.log(loginInfo);
      const { username, password } = loginInfo;
      const res = (await signin(username, password)) as unknown as LoginResponse
      // 读取token并存储到localStorage
      console.log(res);
      if (res.access_token) {
        store.$patch({
          token: res.access_token
        })

        router.push({path:'/home'});
      }
      // axios.post('/auth/login', loginInfo).then(res => {
      //   console.log(res);
      // });
    }
    return {
      loginInfo,
      toLogin,
    }
  }
})
</script>

<style scoped></style>
